var levels = [
  {
    helpTitle: "根据它们的类型来选择元素",
    selectorName: "类型选择器",
    doThis: "选择餐盘",
    selector: "plate",
    syntax: "A",
    help: "选择所有的元素类型 <strong>A</strong>. 类型是指标签的类型,所以 <tag>div</tag>, <tag>p</tag> 和 <tag>ul</tag> 是不同的标签类型.",
    examples: [
      '<strong>div</strong> 选择所有的<tag>div</tag> 元素.',
      '<strong>p</strong> 选择所有的<tag>p</tag> 元素.',
    ],
    boardMarkup: `
    <plate/>
    <plate/>
    `
  },
  {
    doThis: "选择便当盒",
    selector: "bento",
    syntax: "A",
    helpTitle: "根据它们的类型来选择元素",
    selectorName: "类型选择器",
    help: "选择所有的元素类型 <strong>A</strong>. 类型是指标签的类型,所以 <tag>div</tag>, <tag>p</tag> and <tag>ul</tag> 是不同的标签类型.",
    examples: [
      '<strong>div</strong> 选择所有的<tag>div</tag> 元素.',
      '<strong>p</strong> 选择所有的<tag>p</tag> 元素.',
    ],
    boardMarkup: `
    <bento/>
    <plate/>
    <bento/>
    `
  },
  {
    doThis: "选择花式盘子",
    selector: "#fancy",
    selectorName: "ID 选择器",
    helpTitle: "根据ID选择元素",
    syntax: "#id",
    help: '选择具有特定属性的元素 <strong>id</strong>. 还可以将ID选择器与类型选择器组合使用.',
    examples: [
      '<strong>#cool</strong> 选择带有该属性的元素 <strong>id="cool"</strong>',
      '<strong>ul#long</strong> 选择 <tag>ul id="long"</tag>'
    ],
    boardMarkup: `
    <plate id="fancy"/>
    <plate/>
    <bento/>
    `
  },
  {
    helpTitle: "选择一个标签内的另外一个标签",
    selectorName: "后代选择器",
    doThis: "选择盘子里的苹果",
    selector: "plate apple",
    syntax: "A&nbsp;&nbsp;B",
    help: "选择所有在 <strong>A</strong> 内部的 <strong>B</strong> . <strong>B</strong> 被称之为后代 因为它在另外的一个元素内部.",
    examples: [
      '<strong>p&nbsp;&nbsp;strong</strong> 选择所有的在 <tag>p</tag> 内部的 <tag>strong</tag> 元素',
      '<strong>#fancy&nbsp;&nbsp;span</strong> 选择所有在  <strong>id="fancy"</strong> 内部的<tag>span</tag> 元素',
    ],
    boardMarkup: `
    <bento/>
    <plate>
      <apple/>
    </plate>
    <apple/>
    `
  },
  {
    doThis: "选择花式盘子上的泡菜",
    selector: "#fancy pickle",
    helpTitle: "结合后代和ID选择器",
    syntax: "#id&nbsp;&nbsp;A",
    help: '您可以将任何选择器与后代选择器组合。',
    examples: [
      '<strong>#cool&nbsp;span</strong> 选择所有的<strong>id="cool"</strong>元素 内部的<tag>span</tag> 元素  '
    ],
    boardMarkup: `
    <bento>
    <orange/>
    </bento>
    <plate id="fancy">
      <pickle/>
    </plate>
    <plate>
      <pickle/>
    </plate>
    `
  },
  {
    doThis: "选择小苹果",
    selector: ".small",
    selectorName: "class 选择器",
    helpTitle: "通过class来选择元素",
    syntax: ".classname",
    help: '类选择器选择具有该类属性的所有元素。元素只能有一个ID,但是class却可以有很多个。',
    examples: [
      '<strong>.neato</strong> 选择所有的带有 类  <strong>class="neato"</strong> 的元素 '
    ],
    boardMarkup: `
    <apple/>
    <apple class="small"/>
    <plate>
      <apple class="small"/>
    </plate>
    <plate/>
    `
  },
  {
    doThis: "选择小橘子",
    selector: "orange.small",
    helpTitle: "组合类选择器",
    syntax: "A.className",
    help: '可以将类选择器与其他选择器(如类型选择器)组合使用。',
    examples: [
      '<strong>ul.important</strong> 选择所有  带有 <strong>class="important"</strong> 的<tag>ul</tag> 元素 ',
      '<strong>#big.wide</strong> 选择所有 带有<strong>id="big"</strong>的 <strong>class="wide"</strong> 元素'
    ],
    boardMarkup: `
    <apple/>
    <apple class="small"/>
    <bento>
      <orange class="small"/>
    </bento>
    <plate>
      <orange/>
    </plate>
    <plate>
      <orange class="small"/>
    </plate>`
  },
  {
    doThis: "选择便当里面的小橘子",
    selector: "bento orange.small",
    syntax: "你要全力以赴!",
    helpTitle: "你可以这样做。。",
    help: '结合你在前几个关卡中学到的知识来解决这个问题!',
    boardMarkup: `
    <bento>
      <orange/>
    </bento>
    <orange class="small"/>
    <bento>
      <orange class="small"/>
    </bento>
    <bento>
      <apple class="small"/>
    </bento>
    <bento>
      <orange class="small"/>
    </bento>
    `
  },
  {
    doThis: "选择所有的盘子和便当",
    selector: "plate,bento",
    selectorName: "逗号 组合器 ==  并集选择器 ",
    helpTitle: "使用逗号 组合选择器 ",
    syntax: "A, B",
    help: '这个选择器选取了所有的<strong>A</strong>和<strong>B</strong>元素。你可以用这种方式组合任意选择器，而且你可以指定超过两个选择器',
    examples: [
      '<strong>p, .fun</strong> 同时选择所有的 <tag>p</tag> 元素和 <strong>class="fun"</strong> 元素',
      '<strong>a, p, div</strong> 同时选择所有的 <tag>a</tag>, <tag>p</tag> 和 <tag>div</tag> 元素'
    ],
    boardMarkup: `
    <pickle class="small"/>
    <pickle/>
    <plate>
      <pickle/>
    </plate>
    <bento>
      <pickle/>
    </bento>
    <plate>
      <pickle/>
    </plate>
    <pickle/>
    <pickle class="small"/>
    `
  },
  {
    doThis: "选择所有",
    selector: "*",
    selectorName: "通配选择器",
    helpTitle: "你可以选择所有的元素",
    syntax: "*",
    help: '你可以使用通配选择器来选择所有的元素',
    examples: [
      '<strong>p *</strong> 选择 <tag>p</tag> 所有的内部的元素',
    ],
    boardMarkup: `
    <apple/>
    <plate>
      <orange class="small" />
    </plate>
    <bento/>
    <bento>
      <orange/>
    </bento>
    <plate id="fancy"/>
    `
  },
  {
    doThis: "选择餐盘里面的所有的元素",
    selector: "plate *",
    syntax: "A&nbsp;&nbsp;*",
    helpTitle: "组合通配选择器",
    help: '这个选择器会选择 <strong>A</strong>. 内部所有的元素',
    examples: [
      '<strong>p *</strong>选择 <tag>p</tag> 内部所有的元素 ',
      '<strong>ul.fancy *</strong> 选择 <tag>ul class="fancy"</tag> 内部所有的元素.'
    ],
    boardMarkup: `
    <plate id="fancy">
      <orange class="small"/>
    </plate>
    <plate>
      <pickle/>
    </plate>
    <apple class="small"/>
    <plate>
      <apple/>
    </plate>`
  },
  {
    doThis: "选择紧邻盘子旁边的每个苹果。",
    selector: "plate + apple",
    helpTitle: "选择跟在元素后面的一个兄弟元素",
    selectorName: "相邻兄弟选择器",
    syntax: "A + B",
    help: "这个选择器选取了直接跟在<strong>A</strong>元素后面的所有<strong>B</strong>元素。彼此紧跟的元素被称为兄弟元素。它们处于相同的层级或深度。<br/><br/>在这个层级的HTML标记中，具有相同缩进的元素被视为兄弟元素。",
    examples: [
      '<strong>p + .intro</strong> 选择了紧挨着  <tag>p</tag> 元素的一个<strong>class="intro"</strong> 元素',
      '<strong>div + a</strong> 择了紧挨着 <tag>div</tag> 元素的一个 <tag>a</tag> 元素'
    ],
    boardMarkup: `
    <bento>
      <apple class="small"/>
    </bento>
    <plate />
    <apple class="small"/>
    <plate />
    <apple/>
    <apple class="small"/>
    <apple class="small"/>
    `
  },
  {
    selectorName: "通用兄弟选择器",
    helpTitle: "选择跟随在元素后面的所有兄弟元素。",
    syntax: "A ~ B",
    doThis: "选择便当旁边的泡菜",
    selector: "bento ~ pickle",
    help: "你可以选择紧随在某个元素后面的所有兄弟元素。这类似于相邻选择器（A + B），但它获取的是所有后续的元素，而不只是一个。",
    examples: [
      '<strong>A ~ B</strong> 选择 <strong>A</strong> 后面所有的<strong>B</strong> '
    ],
    boardMarkup: `
    <pickle/>
    <bento>
      <orange class="small"/>
    </bento>
    <pickle class="small"/>
    <pickle/>
    <plate>
      <pickle/>
    </plate>
    <plate>
      <pickle class="small"/>
    </plate>
    `
  },
  {
    selectorName: "子元素选择器",
    syntax: "A > B&nbsp;",
    doThis: "选择放在盘子上的苹果。",
    selector: "plate > apple",
    helpTitle: "选择元素的子元素",
    help: "你可以选择其他元素的直接子元素。子元素是直接嵌套在另一个元素中的任何元素。<br><br>嵌套层级更深的元素被称为后代元素。",
    examples: [
      '<strong>A > B</strong> 选择 <strong>B</strong> 内所有的直接子元素 <strong>A</strong>'
    ],
    boardMarkup: `
    <plate>
      <bento>
        <apple/>
      </bento>
    </plate>
    <plate>
      <apple/>
    </plate>
    <plate/>
    <apple/>
    <apple class="small"/>
    `
  },
  {
    selectorName: "伪元素选择器 第一个孩子",
    helpTitle: "选择元素内的第一个子元素。",
    doThis: "选择最上面的橙子",
    selector: "plate :first-child",
    syntax: ":first-child",
    help: "你可以选择第一个子元素。子元素是直接嵌套在另一个元素中的任何元素。你可以将这个伪选择器与其他选择器结合使用。",
    examples: [
      '<strong>:first-child</strong> 选择所有第一个子元素。',
      '<strong>p:first-child</strong> 选择所有第一个子级 <tag>p</tag> 元素。',
      '<strong>div p:first-child</strong> 选择所有在 <tag>div</tag> 内的第一个子级 <tag>p</tag> 元素。'
    ],
    boardMarkup: `
    <bento/>
    <plate />
    <plate>
      <orange />
      <orange />
      <orange />
    </plate>
    <pickle class="small" />
    `
  }
  ,
  {
    selectorName: "独子选择器",
    helpTitle: "当只有一个儿子时被选中",
    doThis: "选择盘子上的苹果和泡菜",
    selector: "plate :only-child",
    syntax: ":only-child",
    help: "你可以选择作为A元素中唯一子元素的B元素。",
    examples: [
      '<strong>span:only-child</strong> 选择作为其他元素中唯一子元素的 <tag>span</tag> 元素。',
      '<strong>ul :only-child</strong> 选择作为 <tag>ul</tag> 中唯一的 <tag>li</tag> 元素。'
    ],
    boardMarkup: `
    <plate>
      <apple/>
    </plate>
    <plate>
      <pickle />
    </plate>
    <bento>
      <pickle />
    </bento>
    <plate>
      <orange class="small"/>
      <orange/>
    </plate>
    <pickle class="small"/>
    `
  }
  ,
  {
    selectorName: "最后一个孩子",
    helpTitle: "选择另一个元素内的最后一个元素",
    doThis: "选择小苹果和泡菜",
    selector: ".small:last-child",
    syntax: ":last-child",
    help: "你可以使用此选择器选择作为另一个元素内的最后一个子元素。<br><br>专业提示 &rarr; 在只有一个元素的情况下，该元素既是第一个子元素，也是唯一的子元素和最后一个子元素！",
    examples: [
      '<strong>:last-child</strong> 选择所有最后一个子元素。',
      '<strong>span:last-child</strong> 选择所有最后一个子级 <tag>span</tag> 元素。',
      '<strong>ul li:last-child</strong> 选择任何 <tag>ul</tag> 内的最后一个 <tag>li</tag> 元素。'
    ],
    boardMarkup: `
    <plate id="fancy">
      <apple class="small"/>
    </plate>
    <plate/>
    <plate>
      <orange class="small"/>
      <orange>
    </plate>
    <pickle class="small"/>`
  }
  ,
  {
    selectorName: "第N个孩子选择器",
    helpTitle: "根据在另一个元素中的顺序选择元素",
    doThis: "选择第3个盘子",
    selector: "plate:nth-child(3)",
    syntax: ":nth-child(A)",
    help: "选择另一个元素中的第<strong>n</strong>个（例如：第1个、第3个、第12个等）子元素。",
    examples: [
      '<strong>:nth-child(8)</strong> 选择作为其他元素第8个子元素的所有元素。',
      '<strong>div p:nth-child(2)</strong> 选择每个 <strong>div</strong> 中的第二个 <strong>p</strong> 元素。',
    ],
    boardMarkup: `
    <plate/>
    <plate/>
    <plate/>
    <plate id="fancy"/>
    `
  }
  ,
  {
    selectorName: "倒数序号选择器",
    helpTitle: "根据在另一个元素中的顺序选择元素，从后往前计数",
    doThis: "选择第1个便当盒",
    selector: "bento:nth-last-child(3)",
    syntax: ":nth-last-child(A)",
    help: "从父元素的底部选择子元素。类似于nth-child，但是从后往前计数！",
    examples: [
      '<strong>:nth-last-child(2)</strong> 选择所有倒数第二个子元素。'
    ],
    boardMarkup: `
    <plate/>
    <bento/>
    <plate>
      <orange/>
      <orange/>
      <orange/>
    </plate>
    <bento/>
    `
  }
  ,
  {
    selectorName: "特定类型的第一个元素",
    helpTitle: "选择特定类型的第一个元素",
    doThis: "选择第一个苹果",
    selector: "apple:first-of-type",
    syntax: ":first-of-type",
    help: "选择在另一个元素中的特定类型的第一个元素。",
    examples: [
      '<strong>span:first-of-type</strong> 选择任何元素中的第一个 <tag>span</tag> 元素。'
    ],
    boardMarkup: `
    <orange class="small"/>
    <apple/>
    <apple class="small"/>
    <apple/>
    <apple class="small"/>
    <plate>
      <orange class="small"/>
      <orange/>
    </plate>
    `
  }
  ,
  {
    selectorName: "选择特定类型的第n个元素",
    doThis: "选择所有偶数个盘子",
    selector: "plate:nth-of-type(even)",
    syntax: ":nth-of-type(A)",
    help: "根据元素的类型和在另一个元素中的顺序选择特定的元素 - 或者选择该元素的偶数或奇数个实例。",
    examples: [
      '<strong>div:nth-of-type(2)</strong> 选择第二个 div 实例。',
      '<strong>.example:nth-of-type(odd)</strong> 选择 example 类的所有奇数个实例。'
    ],
    boardMarkup: `
    <plate/>
    <plate/>
    <plate/>
    <plate/>
    <plate id="fancy"/>
    <plate/>
    `
  }
  ,
  {
    selectorName: "带公式的Nth-of-type选择器",
    doThis: "选择从第三个开始的每隔2个盘子",
    selector: "plate:nth-of-type(2n+3)",
    syntax: ":nth-of-type(An+B)",
    help: "nth-of-type 公式选择每隔第 n 个元素，从特定实例开始计数该元素。",
    examples: [
      '<strong>span:nth-of-type(6n+2)</strong> 选择每隔第 6 个 <tag>span</tag> 实例，从第二个实例（包括）开始。'
    ],
    boardMarkup: `
    <plate/>
    <plate>
      <pickle class="small" />
    </plate>
    <plate>
      <apple class="small" />
    </plate>
    <plate/>
    <plate>
      <apple />
    </plate>
    <plate/>
    `
  }
  ,
  {
    selectorName: "只有类型选择器",
    helpTitle: "选择其父元素内唯一的元素类型",
    selector: "apple:only-of-type",
    syntax: ":only-of-type",
    doThis: "选择中间盘子上的苹果",
    help: "选择其父元素内唯一的元素类型。",
    examples: [
      '<strong>p span:only-of-type</strong> 选择任意 <tag>p</tag> 元素中的唯一 <tag>span</tag> 元素。'
    ],
    boardMarkup: `
    <plate id="fancy">
      <apple class="small" />
      <apple />
    </plate>
    <plate>
      <apple class="small" />
    </plate>
    <plate>
      <pickle />
    </plate>
    `
  }
  ,
  {
    selectorName: "Last of Type Selector",
    helpTitle: "选择特定类型的最后一个元素",
    doThis: "选择最后一个苹果和橙子",
    selector: ".small:last-of-type",
    syntax: ":last-of-type",
    help: "选择在其父元素中是特定类型的最后一个元素。记住，类型指的是标签的种类，所以 <tag>p</tag> 和 <tag>span</tag> 是不同类型的。<br><br>我想知道在恐龙灭绝之前是不是这样选择最后一个恐龙的。",
    examples: [
      '<strong>div:last-of-type</strong> 选择每个元素中的最后一个 <tag>div</tag>。',
      '<strong>p span:last-of-type</strong> 选择每个 <tag>p</tag> 中的最后一个 <tag>span</tag>。'
    ],
    boardMarkup: `
    <orange class="small"/>
    <orange class="small" />
    <pickle />
    <pickle />
    <apple class="small" />
    <apple class="small" />
    `
  }
  ,
  {
    selectorName: "空选择器",
    helpTitle: "选择没有子元素的元素",
    doThis: "选择空的便当",
    selector: "bento:empty",
    syntax: ":empty",
    help: "选择没有任何其他元素的元素。",
    examples: [
      '<strong>div:empty</strong> 选择所有空的 <tag>div</tag> 元素。'
    ],
    boardMarkup: `
    <bento/>
    <bento>
      <pickle class="small"/>
    </bento>
    <plate/>
    <bento/>`
  }
  ,
  {
    selectorName: "否定伪类",
    helpTitle: "选择不匹配否定选择器的所有元素",
    doThis: "选择大苹果",
    selector: "apple:not(.small)",
    syntax: ":not(X)",
    help: '你可以使用这个选择器来选择所有不匹配选择器 <strong>"X"</strong> 的元素。',
    examples: [
      '<strong>:not(#fancy)</strong> 选择所有没有 <strong>id="fancy"</strong> 的元素。',
      '<strong>div:not(:first-child)</strong> 选择所有不是第一个子元素的 <tag>div</tag> 元素。',
      '<strong>:not(.big, .medium)</strong> 选择所有没有 <strong>class="big"</strong> 或 <strong>class="medium"</strong> 的元素。'
    ],
    boardMarkup: `
    <plate id="fancy">
      <apple class="small" />
    </plate>
    <plate>
      <apple />
    </plate>
    <apple />
    <plate>
      <orange class="small" />
    </plate>
    <pickle class="small" />
    `
  }
  ,
  {
    selectorName: "属性选择器",
    helpTitle: "选择具有特定属性的所有元素",
    doThis: "为某人选择物品",
    selector: "[for]",
    syntax: "[attribute]",
    help: '属性出现在元素的开标签中，如：<tag>span attribute="value"</tag>。属性不一定有值，可以为空！',
    examples: [
      '<strong>a[href]</strong> 选择所有具有 <strong>href="anything"</strong> 属性的 <tag>a</tag> 元素。',
      '<strong>[type]</strong> 选择所有具有 <strong>type="anything"</strong> 属性的元素。'
    ],
    boardMarkup: `
    <bento><apple class="small"/></bento>
    <apple for="Ethan"/>
    <plate for="Alice"><pickle/></plate>
    <bento for="Clara"><orange/></bento>
    <pickle/>`
  },
  {
    selectorName: "属性选择器",
    helpTitle: "选择具有特定属性的所有元素",
    doThis: "为某人选择盘子",
    selector: "plate[for]",
    syntax: "A[attribute]",
    help: "将属性选择器与另一个选择器（如标签名选择器）组合，只需将其添加到末尾即可。",
    examples: [
      '<strong>[value]</strong> 选择所有具有 <strong>value="anything"</strong> 属性的元素。',
      '<strong>a[href]</strong> 选择所有具有 <strong>href="anything"</strong> 属性的 <tag>a</tag> 元素。',
      '<strong>input[disabled]</strong> 选择所有具有 <strong>disabled</strong> 属性的 <tag>input</tag> 元素。'
    ],
    boardMarkup: `
    <plate for="Sarah"><pickle/></plate>
    <plate for="Luke"><apple/></plate>
    <plate/>
    <bento for="Steve"><orange/></bento>
    `
  },
  {
    selectorName: "属性值选择器",
    helpTitle: "选择具有特定属性值的所有元素",
    doThis: "选择Vitaly的餐点",
    selector: "[for=Vitaly]",
    syntax: '[attribute="value"]',
    help: "属性选择器区分大小写，每个字符必须完全匹配。",
    examples: [
      '<strong>input[type="checkbox"]</strong> 选择所有复选框（checkbox）输入元素。'
    ],
    boardMarkup: `
    <apple for="Alexei" />
    <bento for="Albina"><apple /></bento>
    <bento for="Vitaly"><orange/></bento>
    <pickle/>
    `
  },
  {
    selectorName: "属性开始选择器",
    helpTitle: "选择具有属性值以特定字符开头的所有元素",
    doThis: "选择以'Sa'开头的名称的物品",
    selector: '[for^="Sa"]',
    syntax: '[attribute^="value"]',
    examples: [
      '<strong>.toy[category^="Swim"]</strong> 选择具有类 <strong>toy</strong> 并且 <strong>category="Swimwear"</strong> 或 <strong>category="Swimming"</strong> 的元素。'
    ],
    boardMarkup: `
    <plate for="Sam"><pickle/></plate>
    <bento for="Sarah"><apple class="small"/></bento>
    <bento for="Mary"><orange/></bento>
    `
  },
  {
    selectorName: "属性结束选择器",
    helpTitle: "选择具有属性值以特定字符结尾的所有元素",
    doThis: "选择以'ato'结尾的名称的物品",
    selector: '[for$="ato"]',
    syntax: '[attribute$="value"]',
    help: '',
    examples: [
      '<strong>img[src$=".jpg"]</strong> 选择所有显示 <strong>.jpg</strong> 图片的图像元素。',
    ],
    boardMarkup: `
    <apple class="small"/>
    <bento for="Hayato"><pickle/></bento>
    <apple for="Ryota"></apple>
    <plate for="Minato"><orange/></plate>
    <pickle class="small"/>
    `
  },
  {
    selectorName: "属性通配符选择器",
    helpTitle: "选择属性值中包含特定字符的所有元素",
    syntax: '[attribute*="value"]',
    doThis: "选择名称中包含'obb'的餐点",
    selector: '[for*="obb"]',
    help: '如果可以在类似 <strong>class</strong>、<strong>href</strong> 或 <strong>src</strong> 属性中确定共同的模式，这是一个有用的选择器。',
    examples: [
      '<strong>img[src*="/thumbnails/"]</strong> 选择所有显示来自 "thumbnails" 文件夹的图像元素。',
      '<strong>[class*="heading"]</strong> 选择所有类中包含 "heading" 的元素，如 <strong>class="main-heading"</strong> 和 <strong>class="sub-heading"</strong>。'
    ],
    boardMarkup: `
    <bento for="Robbie"><apple /></bento>
    <bento for="Timmy"><pickle /></bento>
    <bento for="Bobby"><orange /></bento>
    `
  }
  
];
